import 'package:flutter/material.dart';
import 'package:flutter_framework/utils/screen_ui.dart';

class TestColorFiltered extends StatefulWidget {
  const TestColorFiltered({super.key});

  @override
  State<TestColorFiltered> createState() => _TestColorFilteredState();
}

class _TestColorFilteredState extends State<TestColorFiltered> {
  late OverlayEntry overlayEntry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("test colorfiltered"),
      ),
      body: GestureDetector(
        onTap: () {},
        child: Column(
          children: [
            TextButton(
                onPressed: () {
                  overlayEntry = OverlayEntry(builder: (_) {
                    return GestureDetector(
                      onTap: () {
                        overlayEntry.remove();
                      },
                      child: Stack(
                        children: [
                          ColorFiltered(
                              colorFilter: ColorFilter.mode(
                                  Colors.red.withOpacity(0.4),
                                  BlendMode.srcOut),
                              child: Stack(
                                children: [
                                  Container(
                                    decoration: BoxDecoration(
                                        color: Colors.white,
                                        backgroundBlendMode: BlendMode.dstOut),
                                  ),
                                  Positioned(
                                    top: 100,
                                    left: 0,
                                    child: Container(
                                      width: 100,
                                      height: 100,
                                      color: Colors.white,
                                    ),
                                  )
                                  // TextButton(
                                  //   onPressed: () {
                                  //     overlayEntry = OverlayEntry(builder: (_) {
                                  //       return Container(
                                  //         width: ScreenUI.width,
                                  //         height: ScreenUI.height,
                                  //       );
                                  //     });
                                  //     Overlay.of(context)?.insert(overlayEntry);
                                  //   },
                                  //   child: Text(
                                  //     "data",
                                  //     style: TextStyle(color: Colors.red),
                                  //   ),
                                  // )
                                ],
                              ))
                        ],
                      ),
                    );
                  });
                  Overlay.of(context)?.insert(overlayEntry);
                },
                child: Text("data"))
          ],
        ),
      ),
    );
  }
}
